<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>脱靶量状态显示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: row;
            height: 100vh;
            box-sizing: border-box;
        }
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            min-width: 250px;
            max-width: 250px;
            background-color: #f8f9fa;
            padding: 15px;
            height: 100%;
            transform: translateX(-250px);
            transition: transform 0.3s ease;
            z-index: 1000;
        }
        .sidebar.show {
            transform: translateX(0);
        }
        .sidebar-toggle {
            position: fixed;
            top: 15px;
            left: 15px;
            z-index: 1000;
            cursor: pointer;
            font-size: 24px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 10px;
            transition: background-color 0.3s;
        }
        .sidebar-toggle:hover {
            background-color: #0056b3;
        }
        .container {
            margin-left: 250px; /* Sidebar width */
            padding: 20px;
            width: calc(100% - 250px); /* Adjusted width */
            box-sizing: border-box;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            height: 100%;
            overflow-y: auto;
        }
        .button-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        textarea {
            width: 100%;
            height: 800px;
            font-size: 16px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: none;
            box-sizing: border-box;
            margin-bottom: 20px;
            background-color: #fafafa;
            color: #333;
            overflow-y: auto;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }
        .grid-item {
            background-color: #e9ecef;
            border-radius: 4px;
            padding: 10px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/control.css" rel="stylesheet">
</head>
<body>
    <div class="sidebar">
        <h4 class="text-center">导航</h4>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/control.html">Control</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/servo.html">Offset</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/config_exposure">Exposure Config</a>
            </li>
        </ul>
    </div>

    <div class="sidebar-toggle">
        <span id="toggle-sidebar">☰</span>
    </div>

    <div class="container">
        <div class="button-container">
            <form action="{{ url_for('start_servo_listener') }}" method="get">
                <button type="submit" id="startListening">开始监听</button>
            </form>
            <form action="{{ url_for('stop_servo_listener') }}" method="get">
                <button type="submit" id="stopListening">停止监听</button>
            </form>
            <button id="download">下载文本框里的内容</button>
        </div>
        <textarea id="textBox" readonly></textarea>
        <div id="gridContainer" class="grid-container"></div>
    </div>

    <script>
        const startButton = document.getElementById('startListening');
        const stopButton = document.getElementById('stopListening');
        const downloadButton = document.getElementById('download');
        const textBox = document.getElementById('textBox');
        const gridContainer = document.getElementById('gridContainer');

        let listening = false;

        startButton.addEventListener('click', () => {
            if (!listening) {
                listening = true;
                console.log('开始监听');
                // 可以在这里添加其他的监听逻辑
            } else {
                console.log('已在监听中');
            }
        });

        stopButton.addEventListener('click', () => {
            if (listening) {
                listening = false;
                console.log('停止监听');
                // 可以在这里添加其他的停止监听逻辑
            } else {
                console.log('未在监听中');
            }
        });

        downloadButton.addEventListener('click', () => {
            const text = textBox.value;
            if (text) {
                const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = '内容.txt';
                a.click();
                URL.revokeObjectURL(url);
            } else {
                alert('文本框为空');
            }
        });

        // 模拟瀑布流布局效果
        textBox.addEventListener('input', () => {
            const text = textBox.value;
            const lines = text.split('\n');
            gridContainer.innerHTML = ''; // 清空现有内容
            lines.forEach(line => {
                const div = document.createElement('div');
                div.className = 'grid-item';
                div.textContent = line;
                gridContainer.appendChild(div);
            });
        });

        // Toggle sidebar visibility
        document.getElementById('toggle-sidebar').addEventListener('click', function() {
            document.querySelector('.sidebar').classList.toggle('show');
        });
    </script>

<script>
    function fetchData() {
        fetch('/get_servo_data')
            .then(response => response.json())
            .then(data => {
                const output = document.getElementById('textBox');
                // 获取当前文本内容，并拆分为数组
                let currentMessages = output.innerHTML.split('\n').filter(line => line);
                
                // 将新数据添加到当前消息数组
                currentMessages = currentMessages.concat(data);
                
                // 保持最多1000条消息
                if (currentMessages.length > 1000) {
                    currentMessages = currentMessages.slice(currentMessages.length - 1000);
                }

                // 更新输出内容
                output.innerHTML = currentMessages.join('\n');
                output.scrollTop = output.scrollHeight; // 自动滚动到最新消息
            });
    }
    setInterval(fetchData, 1000); // 每秒获取一次数据
</script>

</body>
</html>
